<template>
	<div class="tab-item">
		<span class="whitespace-nowrap">
			<slot></slot>
		</span>
		<n-icon class="icon" size="14">
			<CloseOutlined />
		</n-icon>
	</div>
</template>

<script setup lang="ts">
import {
	CloseOutlined
} from '@vicons/antd';
defineOptions({ name: 'ButtonTab' });
</script>

<style scoped>
.tab-item {
	background: #fff;
	color: var(--ad7a7ef0-getBaseColor);
	height: 32px;
	padding: 6px 16px 4px;
	border-radius: 3px;
	margin-top: 4px;
	margin-right: 6px;
	cursor: pointer;
	display: inline-block;
	position: relative;
	flex: 0 0 auto;
}

.icon {
	height: 22px;
	width: 21px;
	margin-right: -6px;
	position: relative;
	vertical-align: middle;
	text-align: center;
	color: #808695;
}
</style>
